<template>
  <div class="commentItem flex-row">
    <vue-img :src="user.avatar" class="avatar"></vue-img>
    <div class="center flex-grow">
      <div class="row1 color-info flex-row flex-between">
        <div class="name">{{ user.nick_name }}</div>
        <div class="date">{{ data.created_at | time }}</div>
      </div>
      <div class="row2">
        <div class="content">{{ data.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],

  filters: {
    time (val){
      return val.replace(/^\d{4}-(\d\d-\d\d) (\d\d:\d\d).+$/, '$1 $2')
    }
  },

  data (){
    return {
      
    }
  },

  computed: {
    user (){
      return this.data.user
    }
  },

  methods: {
      
  }
}
</script>

<style lang="less" scoped>
.commentItem{
  background-color: white;
  margin-top: 5px;
  padding: 15px 10px;
  box-sizing: border-box;

  .row2{
    font-size: 14px;
  }

  .name{
    width: 7em;
    .text-limit;
  }

  .avatar{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .date{
    font-size: small;
    color: @subtext;
  }

  .content{
    word-break: break-word;
  }
}
</style>